<template>
	<movable-area style="width: 100%; height: 100%">
		<movable-view :x="x" :y="y" direction="all">
			<view>
				<view class="lxkf">
					<button @error="onimError" :data-im-id="dataImId" open-type="im"></button>
					<image src="@/static/image/my/lxkf.png" mode=""></image>
				</view>
			</view>
		</movable-view>
		<view class="context">
			<view @click="toDetails(item.order_id, item.product_type)" v-for="(item, index) in orderList" class="goods">
				<view class="goods_type">订单编号：{{ item.order_sn }}</view>
				<view class="goods_const">
					<view class="goods_item">
						<image :src="item.img_url" mode=""></image>
						<view class="goods_text">
							<view class="title">{{ item.title }}</view>
							<view v-for="(skuItem, skuIndex) in item.skus" :key='skuIndex' class="fu_textle">
								<view>{{ skuItem.title }}*{{ skuItem.quantity }}</view>
								<view>￥{{ skuItem.price * skuItem.quantity }}</view>
							</view>
						</view>
					</view>
					<view v-show="item.status === 1 || item.status === 7" class="copeWith">应付￥<text>{{ item.price
							}}</text>
					</view>
					<view v-show="item.status !== 1 && item.status !== 7" class="copeWith">实付￥<text>{{
						item.payment_money }}</text></view>
					<view v-show="item.product_type === 15 && item.status !== 5 && item.status != 4" class="cknum">
						次卡剩余{{
							item.unUseNum }}次</view>
					<view class="controls">
						<view class="delete">订单详情</view>
						<view @click.stop="orderDel(item.id)" style="color: #ff9900;border-color: #ff9900;"
							v-show="item.status === 7 || item.status === 5" class="delete">删除订单</view>
						<view @click.stop="getPopUp(item)" style="color: #ff9900;border-color: #ff9900;"
							v-show="item.status === 2 && item.product_type === 1" class="delete">立即预约</view>
						<view @click.stop="getToPay(item.order_id)" style="color: #ff9900;border-color: #ff9900;"
							v-show="item.status === 1" class="delete">继续付款</view>
						<!-- <view @click.stop="toReview(item.order_id)" v-show="item.status === 6" style="color: #ff9900;border-color: #ff9900;" class="delete">去评价</view> -->
						<view @click.stop="theOrder(item.order_id)"
							v-show="item.status === 11 && item.product_type === 1"
							style="color: #ff9900;border-color: #ff9900;" class="delete">确认订单</view>
					</view>
				</view>
			</view>
		</view>
	</movable-area>
</template>
<script>
import throttle from "@/utils/throttle.js"
import { getOrderList, getOrderDel, getOrderConfirm } from '@/api/home.js'
export default {
	data() {
		return {
			x: 0,
			y: 140,
			dataImId: "64405815494",
			optList: [
				{ id: 0, name: '全部' },
				{ id: 1, name: '待付款' },
				{ id: 2, name: '待预约' },
				{ id: 8, name: '待接单' },
				{ id: 3, name: '待核销' },
				{ id: 11, name: '待确认' },
				{ id: 6, name: '已完成' },
				{ id: 4, name: '售后' }
			],
			isOpt: 0,
			orderList: [],
			show: false,
			makeTime: {
				orderTime: null,
				id: null
			}
		}
	},
	onLoad(option) {
		option.id && this.optList.forEach((item, index) => {
			if (Number(option.id) === item.id) {
				this.isOpt = index
			}
		})
	},
	onShow() {
		this.setOrderList()
	},
	methods: {
		// 确认订单
		theOrder(id) {
			uni.showModal({
				title: '提示',
				content: `确定当前订单吗?`,
				success: res => {
					if (res.confirm) {
						getOrderConfirm({
							order_id: id
						}).then(res => {
							if (res.code === 1) {
								this.$showToast('确认成功！')
								this.isOpt = 6
								this.setOrderList()
							} else {
								this.$showToast(res.msg)
							}

						})
					}
				}
			})
		},
		// 继续支付
		getToPay: throttle(function (id) {
			tt.continueToPay({
				orderId: id,
				success: (res) => {
					this.$showToast('支付成功')
					this.isOpt = 2
					this.setOrderList()
				},
				fail: (res) => {
					this.$showToast('支付失败, 请重新下单')
				}
			})
		}, 600),
		toDetails(id, protype) {
			if (protype == 1 || protype == 22) {
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?id=' + id
				})
			} else {
				uni.navigateTo({
					url: '/pages/ckorderDetails/ckorderDetails?id=' + id
				})
			}

		},
		// 删除订单
		orderDel(id) {
			uni.showModal({
				title: '提示',
				content: `确定要删除当前订单吗?`,
				success: res => {
					if (res.confirm) {
						getOrderDel({
							id: id
						}).then(res => {
							if (res.code === 1) {
								this.$showToast('删除成功')
								this.setOrderList()
							} else {
								this.$showToast(res.msg)
							}
						})
					}
				}
			})
		},
		getPopUp(item) {
			uni.navigateTo({
				url: '/pages/reservation/reservation?id=' + item.order_id
			})
		},
		getCity(city) {
			let citys = city.split('/')
			let downtown = ''
			citys.forEach(srt => {
				downtown += srt
			})
			return downtown
		},
		setIsOpt(event) {
			this.orderList = []
			this.isOpt = event.index
			this.setOrderList()
		},
		setOrderList() {
			getOrderList({
				status: this.optList[this.isOpt].id
			}).then(res => {
				if (res.code === 1) {
					this.orderList = res.data
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.lxkf {
	position: relative;
	opacity: 0.9;

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	image {
		width: 180rpx;
		height: 160rpx;
		margin-top: 16rpx;
	}
}

.context {
	padding-bottom: 20rpx;
}

.controls {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;

	.delete {
		padding: 14rpx 30rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		color: #398ade;
		border: 1rpx solid #398ade;
		font-weight: bold;
		margin-left: 20rpx;
		height: fit-content;
	}

	button {
		margin: 0 !important;
		line-height: normal !important;
	}

	button::after {
		border: none;
		background-color: none;
	}
}

.goods {
	width: 93%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	padding: 20rpx 0;

	.goods_type {
		text-align: right;
		padding: 0 30rpx 20rpx 0;
		color: #ff9900;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.goods_const {
		padding: 20rpx 20rpx 0 20rpx;

		.copeWith {
			background-color: #f7f7f7;
			text-align: right;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
			font-size: 30rpx;

			text {
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.cknum {
			background-color: #f7f7f7;
			text-align: right;
			color: #ff9900;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
			font-size: 30rpx;

			text {
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.goods_item {
			display: flex;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
		}

		.goods_text {
			width: 80%;
			font-size: 28rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.fu_textle {
				display: flex;
				color: #c0c4cc;
				font-size: 28rpx;
				padding: 16rpx 0;
				justify-content: space-between;
			}
		}

	}
}

.options {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	height: 80rpx;
	z-index: 999;

	.isOpt {
		color: #f5c71c;
		font-weight: bold;
		border-bottom-color: #f5c71c !important;
	}

	view {
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #fff;
		font-size: 30rpx;
	}
}
</style>
